<!--头部版块-->
<app-page-header [pageHeaderInfo]="pageHeaderInfo"></app-page-header>

<div class="normal-table-wrap">
  <app-water-mark></app-water-mark>
  <nz-card nzHoverable [nzBodyStyle]="{'padding-bottom':0}" class="m-b-10">
    <form nz-form>
      <div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24}">
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">菜单名称</nz-form-label>
            <nz-form-control>
              <input nz-input placeholder="请输入菜单名称" name="menuName" [(ngModel)]="searchParam.menuName"/>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24">
          <nz-form-item>
            <nz-form-label [nzFor]="">状态</nz-form-label>
            <nz-form-control>
              <nz-select name="visible" [(ngModel)]="searchParam.visible" nzPlaceHolder="下拉选择" nzAllowClear>
                <nz-option *ngFor="let item of visibleOptions" [nzValue]="item.value"
                           [nzLabel]="item.label"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXs]="24" class="text-right p-0 m-b-10">
          <button (click)="getDataList()" nz-button [nzType]="'primary'"><i nz-icon nzType="search"></i>搜索</button>
          <button nz-button class="m-l-15" (click)="resetForm()"><i nz-icon nzType="close-circle" nzTheme="outline"></i>重置
          </button>
        </div>
      </div>
    </form>
  </nz-card>

  <app-card-table-wrap [tableTitle]="'菜单列表'" (reload)="reloadTable()" [btnTpl]="tableBtns">
    <app-tree-table
      [tableConfig]="tableConfig"
      (changePageSize)="changePageSize($event)"
      (changePageNum)="getDataList($event)"
      [tableData]="dataList">
    </app-tree-table>
    <ng-template #operationTpl let-id="id" let-menuType="menuType" let-fatherId='fatherId'>
      <span *appAuth="ActionCode.MenuEdit" class="operate-text" (click)="edit(id,fatherId)">编辑</span>
      <ng-container *appAuth="ActionCode.MenuAddLowLevel">
        <span class="operate-text" *ngIf="menuType==='C'" (click)="add(id)">添加下级</span>
      </ng-container>
      <span *appAuth="ActionCode.MenuDel" class="operate-text" (click)="del(id)">删除</span>
    </ng-template>
  </app-card-table-wrap>
</div>
<ng-template #zorroIconTpl let-icon='icon'>
  <div class="center">
    <i nz-icon [nzType]="icon" nzTheme="outline"></i>
  </div>
</ng-template>
<ng-template #aliIconTpl let-alIcon='alIcon'>
  <div class="center">
    <i *ngIf="alIcon" nz-icon [nzIconfont]="alIcon"></i>
  </div>
</ng-template>
<ng-template #tableBtns>
  <button (click)="add(0)" nz-button nzType="primary" class="m-r-8"><i nz-icon nzType="plus"></i>新建</button>
</ng-template>
<ng-template #visibleTpl let-visible="visible" let-menuType='menuType'>
  <ng-container *ngIf="menuType==='C'">
    <ng-container *ngTemplateOutlet="visible?yesTpl:notTpl"></ng-container>
  </ng-container>
</ng-template>
<ng-template #newLinkFlag let-newLinkFlag="newLinkFlag" let-menuType='menuType'>
  <ng-container *ngIf="menuType==='C'">
    <ng-container *ngTemplateOutlet="newLinkFlag?yesTpl:notTpl"></ng-container>
  </ng-container>
</ng-template>
<ng-template #yesTpl >
  <nz-tag [nzColor]="'green'">是</nz-tag>
</ng-template>
<ng-template #notTpl>
  <nz-tag [nzColor]="'magenta'">否</nz-tag>
</ng-template>
